import Svg from "@/components/base/Svg"

const style = {
    width: "100%",
    height: "100%",
}

const PALY_INFO = {
    gcash: {
        name: "gcash",
        displayName: "GCash",
        icon: (
            <Svg
                src="pages/UserCenterPage/deposit/gcash_new.svg"
                {...style}
            />
        ),
        cardBgColor: "linear-gradient(96.98deg, #007CFF 0%, #002CB8 100%)",
        themeColor: "#297BFA",
        title: "Linking Gcash",
        channelName: "gcash",
        titleIcon: <Svg src="pages/UserCenterPage/deposit/gcash_title.svg" />,
    },
    maya: {
        name: "maya",
        displayName: "maya",
        icon: (
            <Svg
                src="pages/UserCenterPage/deposit/maya_pay.svg"
                {...style}
            />
        ),
        cardBgColor: "linear-gradient(96.98deg, #00CC66 0%, #00A653 100%)",
        themeColor: "#30F29E",
        title: "Linking Maya",
        channelName: "maya",
        titleIcon: <Svg src="pages/UserCenterPage/deposit/maya_title.svg" />,
    },
    grab: {
        name: "grab",
        displayName: "grab",
        icon: (
            <Svg
                src="pages/UserCenterPage/deposit/grab_new.svg"
                {...style}
            />
        ),
        cardBgColor: "linear-gradient(96.98deg, #68D991 0%, #50B16B 100%)",
        themeColor: "#00B14F",
        title: "Linking GrabPay",
        channelName: "grab",
        titleIcon: <Svg src="pages/UserCenterPage/deposit/grab_title.svg" />,
    },
    unionBank: {
        name: "unionBank",
        icon: (
            <Svg
                src="pages/UserCenterPage/withdraw/union_bank.svg"
                {...style}
            />
        ),
        cardBgColor: "linear-gradient(96.98deg, #FFA300 0%, #FA4616 100%)",
        themeColor: "#1CADFF",
        title: "Linking Bank",
        channelName: "unionBank",
        titleIcon: <Svg src="pages/UserCenterPage/deposit/ub_title.svg" />,
    },
    bdo: {
        name: "dbd",
        icon: (
            <Svg
                src="pages/UserCenterPage/withdraw/bdo_bank.svg"
                {...style}
            />
        ),
        cardBgColor: "",
        themeColor: "#1CADFF",
        title: "Linking Bank",
        channelName: "bdo",
        titleIcon: <Svg src="pages/UserCenterPage/withdraw/bdo_bank.svg" />,
    },
    bpi: {
        name: "bpi",
        icon: (
            <Svg
                src="pages/UserCenterPage/withdraw/bpi_bank.svg"
                {...style}
            />
        ),
        cardBgColor: "",
        themeColor: "#1CADFF",
        title: "Linking Bank",
        channelName: "bpi",
        titleIcon: <Svg src="pages/UserCenterPage/withdraw/bpi_bank.svg" />,
    },
} as const

type PALY_INFO_TYPE = keyof typeof PALY_INFO

const paymentList = [PALY_INFO.gcash, PALY_INFO.maya, PALY_INFO.grab]

const bankList = [PALY_INFO.unionBank, PALY_INFO.bdo, PALY_INFO.bpi]

const ACCOUNT_TYPE = "accountType"
const WITHDRAW_ACCOUNT = "withdrawAccount"

export { PALY_INFO, paymentList, bankList, ACCOUNT_TYPE, WITHDRAW_ACCOUNT }

export type { PALY_INFO_TYPE }
